<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<title>开发平台</title>
	<script src="${ctx}/common/plateform/base/jquery/jquery.min.js"></script>
	<script src="${ctx}/common/plateform/base/bootstrap/bootstrap.min.js"></script>
	<link href="${ctx}/common/plateform/base/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link href="${ctx}/common/plateform/plugins/adminlte/AdminLTE.css" rel="stylesheet">
	<script src="${ctx}/common/plateform/base/layer/layer.js"></script>
	<link href="${ctx}/common/plateform/base/fonts/font-awesome.min.css" rel="stylesheet">
	<link href="${ctx}/common/plateform/base/utils/plateform.css" rel="stylesheet" />
	<link href="${ctx}/common/plateform/base/utils/mystyle.css" rel="stylesheet" />
	<!-- layer弹出层 -->
	<script src="${ctx}/common/plateform/base/layer/layer.js"></script>
	<!--[if lt IE 10]>
	<script src="${ctx}/common/plateform/plugins/ie/html5shiv.min.js"></script>
	<script src="${ctx}/common/plateform/plugins/ie/respond.min.js"></script>
	<![endif]-->
	<!-- bootstrapValidator验证 -->
	<script src="${ctx}/common/plateform/base/bootstrapValidator/bootstrapValidator.min.js"></script>
	<link href="${ctx}/common/plateform/base/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet" />

	<script src="${ctx}/common/plateform/base/utils/jquery-md5-min.js"></script>
	<script src="${ctx}/common/plateform/base/utils/jigswa.js"></script>
	<link href="${ctx}/common/plateform/base/utils/jigswa.css" rel="stylesheet" />
	<script>
        var ctx = '${ctx}';
	</script>
</head>
<style>
	.login_wrap {
		background-size: 100%;
		margin-top: 10px;
	}

	input {
		display: block;
		width: 290px;
		line-height: 40px;
		margin: 10px 0;
		padding: 0 10px;
		outline: none;
		border:1px solid #c8cccf;
		border-radius: 4px;
		color:#6a6f77;
	}
	/**#msg {
		width: 100%;
		line-height: 40px;
		font-size: 14px;
		text-align: center;
	}

	a:link,a:visited,a:hover,a:active {
		margin-left: 100px;
		color: #0366D6;
	}
**/

</style>

<body>

<div class="container">
	<h1 class="login_title ">
		<p class="pull-left"><p><a href="http://www.iussoft.com"><img src="${ctx}/common/plateform/img/mini_logo.png"> 快速开发平台</a></p> <span>用户注册</span></p>
	</h1>
</div>

<div class="wrapper" style="background-color:#f7f7f7;">
<div class="content">
	<div class="row">
		<div  style="padding:15px 150px;">
			<h3 style="padding-top:5px;padding-bottom: 20px;">用户注册</h3>
			<div class="panel">
				<div class="panel-heading text-center link-muted p30" style="border-bottom:1px solid #e6e7ea; ">
					<div class="col-lg-12 text-center">
						<h5 class="col-lg-offset-1 col-lg-3 text-danger">
							① 帐号信息
						</h5>
						<h5 class="col-lg-1"> - </h5>
						<h5 class="col-lg-3">
							② 信息登记
						</h5>
						<h5 class="col-lg-1"> - </h5>
						<h5 class="col-lg-3">
							③ 信息审核
						</h5>
					</div>
				</div>
				<div class="panel-body" id="table1">
					<!-- 注册内容主体 start -->
					<div class="col-lg-8" style="border-right: 1px solid #e6e7ea;">
						<div class="panel">
							<div class="panel-body">
								<form class="form-horizontal" role="form" name="frm1" id="frm1" action="javascript:void(0)">
									<input type="hidden" name="formToken" id="formToken" value="${formToken}">
									<input type="hidden" name="doCode" id="doCode" value="regDymic">
									<input type="hidden" name="pageName"  value="user-list"/>
									<input type="hidden" name="formName"  value="addForm"/>
									<input type="hidden" name="uctUser.orgId" value="4f5213b3dcb740c8abfd9bd5a86368c4"/>
									<input type="hidden" name="uctUser.orgEname" value="platform"/>
									<input type="hidden" name="uctUser.deptId" value="f08a18836276444d80130ecbcca2f7a4"/>
									<input type="hidden" name="uctUser.deptName" value="业务部"/><!--部门名称-->
									<input type="hidden" name="uctUser.sysEname" value="plateform"/>
									<input type="hidden" name="uctUser.userStatus" value="1"/><!--用户状态 1启用,0停用,-1删除-->
									<input type="hidden" name="uctUser.delStatus" value="2"/><!--是否系统用户 1系统用户,0非系统用户,2机构管理员-->
									<input type="hidden" name="uctUser.userType" value="manager"/><!--用户类型manager(管理员)/customer（客户）-->
									<input type="hidden" name="uctUser.regSource" value="web"/><!--注册来源    web：来自互联网注册  plate：后台开户-->
									<input type="hidden" name="rand" id="randCode_form" />

									<div class="form-group col-sm-12">
										<div class="col-sm-3 text-right form-control-static" style="padding-top: 15px;">用户名：</div>
										<div class="col-sm-9">
											<input type="text" class="form-control clean" id="frm1_login_username" name="uctUser.userEname" tip="请输入登录名" placeholder="请输入登录名（由6~20位的小写英文、数字、下划线组成）" abc="1" maxlength="20" style="color: rgb(0, 0, 0);"/>
										</div>
										<div class="col-sm-offset-3 col-sm-9 link-muted">
											作为登录帐号，请填写未被本开发平台注册的账号。账号由6~20位的小写英文、数字、下划线组成，且以字母开头
										</div>
									</div>
									<div class="form-group col-sm-12">
										<div class="col-sm-3 control-label text-right" style="padding-top: 15px;">登录密码：</div>
										<div class="col-sm-9">
											<input type="password" class="form-control clean" id="frm1_login_password" maxlength="20" name="uctUser.userPass" tip="请输入密码" placeholder="请输入登录密码">
										</div>
										<div class="col-sm-offset-3 col-sm-9 link-muted">
											由字母、数字或者英文符号，最短6位，区分大小写
										</div>
									</div>
									<div class="form-group col-sm-12">
										<div class="col-sm-3 control-label text-right" style="padding-top: 15px;">确认密码：</div>
										<div class="col-sm-9">
											<input type="password" class="form-control clean" id="frm1_login_password2" maxlength="20" name="userPass2" tip="请再次输入密码" placeholder="请再次输入密码">
										</div>
									</div>
									<div class="form-group col-sm-12">
										<div class="col-sm-3 control-label text-right" style="padding-top: 15px;">手机号码：</div>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="uctUser.mobile" id="frm1_login_mobile" tip="请输入正确手机号码" placeholder="请输入正确手机号码" abc="1" minlength="11" style="color: rgb(0, 0, 0);">
										</div>
										<div class="col-sm-offset-3 col-sm-9 link-muted">
											必须是真实有效，以保证能及时获取平台发送的短信验证码
										</div>
									</div>
									<div class="form-group col-sm-12">
										<div class="col-sm-3 control-label text-right" style="padding-top: 15px;">验证码：</div>
										<div class="col-sm-9">
											<input id="rand" size="4" maxlength="6" style="width:50%; margin-right:5px;"  placeholder="请输入验证码" class="form-control clean">
											<input name="flagDiv" id="flagDiv" type="hidden" value=""/>
											<button  type="button" id="btn-send-sms" class="btn btn-default btn-sm" onclick="popWin()">获取短信验证码</button>
										</div>
									</div>
									<div class="form-group col-sm-12" >
										<div class="form-group text-center" >
											<button type="button" onclick="regUser()"  class="btn btn-warning btn-lg" style="width:300px;">立即注册</button>
										</div>
									</div>


									<div class="modal fade" id="popWin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
										<div class="modal-dialog" style="width:367px;top:10%;" >
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
														×
													</button>
													<h4 class="modal-title">
														<font color="red">发送手机验证码进行校验<span id="span-module-add-title" class="ml20"></span></font> 
													</h4>
												</div>

												<div class="modal-body">
													<div class="panel-body" style="padding-bottom: 20px;">
														<div id="captcha" style="position: relative;border: 0px red solid;width: 310px;">
														</div>
													</div>
												</div>
											</div>
											<!-- /.modal-content -->
										</div>
									</div>

								</form>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="form-group">
							<div class="col-lg-12 text-center" style="padding:50px;line-height:30px;">
								<p><img src="${ctx}/common/plateform/img/mini_logo.png"></p>
								<p>已有账号？<a href="${ctx}/">立即登录</a></p>
							</div>
						</div>
					</div>
					<!-- 注册内容主体 end -->
				</div>
				<br/>
				<div id="table2" style="height: 400px;display:none;margin-top: 30px;">
					<div class="form-group">
						<div  class="text-center">
							<h3>
								<font color="red">恭喜，您已经成功注册，登录名为：<span id="userName"></span>
								</font>
							</h3>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-12 text-center" style="padding:50px;">
							<p><a href="${ctx}/" class="btn btn-warning btn-lg">立即登录</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>




</div>
</div>












<!-- foot start -->
<center>
	<footer class="login-footer text-center" style="margin-top:10px; margin-bottom:10px;">
		<p class="col-sm-12 ">Copyright &copy; 2018-2020   iussoft.com 版权所有 IUS快速开发平台小组</p>
	</footer>
</center>
<!-- foot start -->

</body>

<script type="text/javascript">
    $(function(){
        setValidate("frm1");//校验
    });

    jigsaw.init(document.getElementById('captcha'), function () {
        sendMsg();
    })

    //回车
    document.onkeydown=function mykeyDown(e){
        //compatible IE and firefox because there is not event in firefox
        e = e||event;
        if(e.keyCode == 13) {return}
        return;
    };

    //发送验证码窗口
    function popWin(){
        var mobileVal = $("#frm1").find("input[name='uctUser.mobile']").val();
        if(mobileVal==null|| mobileVal==""|| mobileVal==undefined){
            layer.tips('请输入手机号码！', '#frm1_login_mobile', {tips: 1});
            return;
		}
        if(!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(mobileVal)){
            layer.tips('请填写正确的手机号码！', '#frm1_login_mobile', {tips: 1});
            return;
        }
		$("#popWin").modal("show");
    }
    //提交注册操作
    function regUser(){
        //1.校验规则-表单提交时触发
        var validate = $('#frm1').data('bootstrapValidator').validate();
        if(!validate.isValid()){ //如果校验不通过
            return;
        }

        var rand = $('#rand').val();
        if(rand==null|| rand==""|| rand==undefined){
            layer.tips('请输入手机验证码！', '#rand', {tips: 1});
            return;
        }
        $("#randCode_form").val($("#rand").val());

        var index_submit = layer.confirm('您确定要提交注册吗？', {btn: ['是','否'],closeBtn: 0,offset: '220px'}
            , function(){
                layer.close(index_submit);
                var index_load = layer.load(1, {shade: false});
                var pass = $('#frm1').find('input[name="uctUser.userPass"]').val();
                pass = pass.md5();
                $('#frm1').find('input[name="uctUser.userPass"]').val(pass);
                $.ajax({
                    url:ctx+"/res/uct/userReg",
                    data:$("#frm1").serialize(),
                    dataType:'json',
                    type:'post',
                    success:function(myData){
                        layer.close(index_load);
                        //console.log(myData);
                        if(myData.flag=="T"){
                            $("#table1").attr("style","display: none");
                            $("#table2").show();
                            $("#userName").text($("#frm1_login_username").val());
                        }else{
                            layer.msg(myData.msg, {offset: '200px'});
                        }
                    }
                });
            });
    }

    //发送短信验证码
    function sendMsg(){
        var formUrl =ctx+"/res/uct/sendSmsCode";
        var index_load= layer.msg("验证码发送中，请注意查收！");
        $("#popWin").modal("hide");
        countSecond("#btn-send-sms");
        $.ajax({
            url:formUrl,type:'post',
            data: $("#frm1").serialize(),
            success:function(data){
                layer.close(index_load);
                console.log(data);
                if("T"==data.flag){
                    layer.msg("验证码发送成功，请注意查收！");
				}
            },error:function(data){
                layer.close(index_load);
                layer.msg("与服务器连接失败，请稍后再试！");
            }
        });
    }

    //发送按钮计时
    function countSecond(obj,timer) {
        if(timer == undefined){
            timer=60;
        }
        if(timer==0){
            $(obj).text("重新发送验证码");
            $(obj).attr("disabled",false);
        }
        if (timer >=1) {
            $(obj).attr("disabled",true);
            $(obj).text("重新发送（"+timer+"S）");
            timer--;
            setTimeout(function() {
                countSecond(obj,timer);
            }, 1000);
        }
    }
    //清空表单数据
    function clearForm(){
        $("#upass").val("");
        $("#userEname").val("");
    }

    //1.校验规则-定义
    function setValidate(formId){
        $('#'+formId).bootstrapValidator({
            // excluded: [':disabled'],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {

                "uctUser.userEname": {
                    validators: {
                        notEmpty: {
                            message: '请输入用户名！'
                        },
                        regexp:{
                            regexp:/^[a-z][a-z0-9_]{6,20}$/,
                            message:'请输入6~20位的小写英文、数字、下划线组成'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: ctx+'/trans/list/?doCode=isExist',
                            message: '用户已存在',//提示消息
                            delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'post'//请求方式
                            /**自定义提交数据，默认值提交当前input value
                             data: function(validator) {
                             return {
                                 password: $('[name="passwordNameAttributeInYourForm"]').val()
                                 whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                             }
                          }
                             */
                        }
                    }
                },
                "uctUser.mobile": {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空！'
                        },
                        regexp: {
                            regexp:/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
                            message: '手机号格式不正确！'
                        }
                    }
                },
                "uctUser.userPass":{
                    validators: {
                        notEmpty: {
                            message: '密码不能为空！'
                        }/**,
                         different: {
                            field: 'uctUser.userEname',
                            message: '密码不能与登录名重复！'
                        },
                         regexp:{
                            regexp:/^(?!.([111111]|[123456]))([A-Z]|[a-z]|[0-9]|[`~!@#$%^&*()+=|{}':;',\\\\[\\\\].<>?~！@#￥%……&*（）——+|{}【】‘；：”“'。，、？]){6,20}$/,
                            message:'密码不能过于简单，密码格式可包含：6-20 位，字母、数字、字符！'
                        }**/
                    }
                },
                "userPass2":{
                    validators: {
                        notEmpty: {
                            message: '请输入确认密码！'
                        },
                        identical: {
                            field: 'uctUser.userPass',
                            message: '两次输入密码不一致！'
                        }
                    }
                }

            }
        });
    }

</script>
</html>
